@keyframes dog {
  0% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog1.png) no-repeat;
    background-size: contain;
  }
  9% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog2.png) no-repeat;
    background-size: contain;
  }
  18% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog3.png) no-repeat;
    background-size: contain;
  }
  27% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog4.png) no-repeat;
    background-size: contain;
  }
  36% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog5.png) no-repeat;
    background-size: contain;
  }
  45% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog6.png) no-repeat;
    background-size: contain;
  }
  54% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog7.png) no-repeat;
    background-size: contain;
  }
  63% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog8.png) no-repeat;
    background-size: contain;
  }
  72% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog9.png) no-repeat;
    background-size: contain;
  }
  81% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog10.png) no-repeat;
    background-size: contain;
  }
  90% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog11.png) no-repeat;
    background-size: contain;
  }
  100% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog12.png) no-repeat;
    background-size: contain;
  }
}

.container {
  width: 6.4rem;
  height: 11.36rem;
  background: url(../images/bg.png) no-repeat;
  background-size: contain;
  position: relative;
}

.container .logo {
  width: 1.03rem;
  height: 0.38rem;
  background: url(../images/logo.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0.45rem;
  right: auto;
  bottom: auto;
  left: 0.45rem;
}

.container .title {
  position: absolute;
  top: 1.6rem;
  right: auto;
  bottom: auto;
  left: auto;
  width: 5.8rem;
  height: 3.1rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.container .title .t1 {
  background: url(../images/title1.png) no-repeat center;
  background-size: contain;
}

.container .title .t2 {
  background: url(../images/title2.png) no-repeat center;
  background-size: contain;
}

.container .title .t3 {
  background: url(../images/title3.png) no-repeat center;
  background-size: contain;
}

.container .title .t4 {
  background: url(../images/title4.png) no-repeat center;
  background-size: contain;
}

.container .title .t1 {
  height: .71rem;
}

.container .title .t2 {
  height: 1.57rem;
}

.container .title .t3 {
  height: 0.62rem;
}

.container .title .t4 {
  height: 0.29rem;
}

.container .cloud1 {
  background: url(../images/cloud1.png) no-repeat;
  background-size: contain;
}

.container .cloud2 {
  background: url(../images/cloud2.png) no-repeat;
  background-size: contain;
}

.container .cloud3 {
  background: url(../images/cloud3.png) no-repeat;
  background-size: contain;
}

.container .cloud4 {
  background: url(../images/cloud4.png) no-repeat;
  background-size: contain;
}

.container .cloud5 {
  background: url(../images/cloud5.png) no-repeat;
  background-size: contain;
}

.container .cloud1 {
  width: 0.77rem;
  height: 0.56rem;
  position: absolute;
  top: 4rem;
  right: auto;
  bottom: auto;
  left: 0.4rem;
}

.container .cloud2 {
  width: 0.43rem;
  height: 0.32rem;
  position: absolute;
  top: 5.45rem;
  right: 1.4rem;
  bottom: auto;
  left: auto;
}

.container .cloud3 {
  width: 0.43rem;
  height: 0.42rem;
  position: absolute;
  top: 4.35rem;
  right: 0.6rem;
  bottom: auto;
  left: auto;
}

.container .cloud4 {
  width: 0.59rem;
  height: 0.44rem;
  position: absolute;
  top: 6.1rem;
  right: 0.47rem;
  bottom: auto;
  left: auto;
}

.container .cloud5 {
  width: 0.34rem;
  height: 0.25rem;
  position: absolute;
  top: 6.35rem;
  right: 1.3rem;
  bottom: auto;
  left: auto;
}

.container .moon {
  width: 0.65rem;
  height: 0.65rem;
  position: absolute;
  top: 5.6rem;
  right: 1.15rem;
  bottom: auto;
  left: auto;
  background: url(../images/moon.png) no-repeat;
  background-size: contain;
  box-shadow: 0 0 .9rem .4rem #61cedb;
  border-radius: 50%;
}

.container .person {
  width: 3.39rem;
  height: 4.21rem;
  position: absolute;
  top: 5.7rem;
  right: auto;
  bottom: auto;
  left: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  background: url(../images/person.png) no-repeat;
  background-size: contain;
}

.container .person .dis1 {
  background: url(../images/dis1.png) no-repeat;
  background-size: contain;
}

.container .person .dis2 {
  background: url(../images/dis2.png) no-repeat;
  background-size: contain;
}

.container .person .dis3 {
  background: url(../images/dis3.png) no-repeat;
  background-size: contain;
}

.container .person .dis4 {
  background: url(../images/dis4.png) no-repeat;
  background-size: contain;
}

.container .person .dis1 {
  width: 0.94rem;
  height: 0.69rem;
  position: absolute;
  top: 0.8rem;
  right: auto;
  bottom: auto;
  left: -1.1rem;
}

.container .person .dis2 {
  width: 1.48rem;
  height: 0.82rem;
  position: absolute;
  top: 0.88rem;
  right: auto;
  bottom: auto;
  left: 2.87rem;
}

.container .person .dis3 {
  width: 0.94rem;
  height: 0.57rem;
  position: absolute;
  top: 3.17rem;
  right: auto;
  bottom: auto;
  left: 3.3rem;
}

.container .person .dis4 {
  width: 1.28rem;
  height: 0.78rem;
  position: absolute;
  top: 3.3rem;
  right: auto;
  bottom: auto;
  left: -1.06rem;
}

.container .button {
  width: 1.71rem;
  height: 0.7rem;
  position: absolute;
  top: 10rem;
  right: auto;
  bottom: auto;
  left: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  background: url(../images/button-start.png) no-repeat;
  background-size: contain;
}

.container .button a {
  display: block;
  width: 1.71rem;
  height: 0.7rem;
}
